<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width" />
    <meta name="server-version" th:content="${serverVersion}"/>
    <title>使用ONLYOFFICE的例子</title>
    <link rel="icon" type="image/ico" href="/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css"  href="css/media.css">
</head>
<body>
<!--/*
   <header>
      <div class="center main
               <img src ="css/img/logo.svg" alt="ONLYOFFICE" />
           </a>
       </div>
        <menu class="responsive-nav">
            <li>
              <a href="#" onclick="toggleSidePanel(event)">
                <img src="css/img/mobile-menu.svg" alt="ONLYOFFICE" />
              </a>
            </li>
            <li>
              <a href="./">
                <img src ="css/img/mobile-logo.svg" alt="ONLYOFFICE" />
              </a>
            </li>
        </menu>
    </header>
    */-->
    <div class="center main">
        <table class="table-main">
            <tbody>
            <tr>
                <td class="left-panel section">
                    <div class="help-block">
                        <span>新建文档</span>
                        <div class="clearFix">
                            <div class="create-panel clearFix">
                                <ul class="try-editor-list clearFix">
                                    <li>
                                        <a class="try-editor word" data-type="docx">docx</a>
                                    </li>
                                    <li>
                                        <a class="try-editor cell" data-type="xlsx">xlsx</a>
                                    </li>
                                    <li>
                                        <a class="try-editor slide" data-type="pptx">pptx</a>
                                    </li>
                                    <li>
                                        <a class="try-editor form" data-type="pdf">pdf</a>
                                    </li>
                                </ul>
                                <label class="side-option">
                                    <input id="createSample" class="checkbox" type="checkbox" />使用样例创建文档
                                </label>
                            </div>

                            <form method="POST" action="upload" enctype="multipart/form-data" class="upload-panel clearFix">
                                <a class="file-upload">上传
                                    <input type="file" id="fileupload" name="file" />
                                </a>
                            </form>

                            <table class="user-block-table" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <td valign="middle">
                                            <span class="select-user">用户</span>
                                            <img id="info" class="info" src="css/img/info.svg"/>
                                            <select class="select-user" id="user">
                                                <option th:each="user : ${users}"
                                                        th:value="${user.id}"
                                                        th:text="${user.name}"/>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="middle">
                                            <span class="select-user">语言</span>
                                            <img class="info info-tooltip" data-id="language"
                                                 data-tooltip="选择ONLYOFFICE编辑器界面的语言"
                                                 src="css/img/info.svg" />
                                            <select class="select-user" id="language">
                                                <option th:each="language: ${languages}"
                                                        th:value="${language.key}"
                                                        th:text="${language.value}"/>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <button class="mobile-close-btn" onclick="toggleSidePanel(event)">
                        <img src="css/img/close.svg" alt="">
                    </button>
                </td>
                <td class="section">
                    <div class="main-panel">
                        <menu class="links">
                            <li class="home-link active" >
                              <a href="./">
                                <img src="css/img/home.svg" alt="Home"/>
                              </a>
                            </li>
                            <li th:if="${enableForgotten}">
                                <a href="/forgotten">遗忘的文件</a>
                            </li>
                        </menu>
                        <div id="portal-info" th:attr="tooltip=${tooltip}" th:style="${not #lists.isEmpty(files)} ? 'display: none' : 'display: table-cell' ">
                            <span class="portal-name">欢迎使用</span>
                            <span class="portal-descr">
                                  开始使用ONLYOFFICE文档编辑器的演示示例，这是第一个基于html5的编辑器。
                                    <br /> 你可以上传你的文件，使用 "<b>上传</b>" 按钮 <b>选择</b> 你个人电脑的文件.
                                </span>
                                <span class="portal-descr">重构使用</span>
                            <span class="portal-descr"></span>
                        </div>
                        <th:block th:if="${not #lists.isEmpty(files)}">
                            <div class="stored-list">
                                <div class="storedHeader">
                                    <div class="storedHeaderText">
                                        <span class="header-list">你的文件</span>
                                    </div>
                                   <!-- <div class="storedHeaderClearAll">
                                        <div class="clear-all">清除所有</div>
                                    </div>-->
                                </div>
                                <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
                                    <thead>
                                    <tr>
                                        <td class="tableHeaderCell tableHeaderCellFileName">标题</td>
                                        <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift">编辑</td>
                                        <td class="tableHeaderCell tableHeaderCellViewers">预览</td>
                                        <td class="tableHeaderCell tableHeaderCellAction">操作</td>
                                    </tr>
                                    </thead>
                                </table>
                                <div class="scroll-table-body">
                                    <table cellspacing="0" cellpadding="0" width="100%">
                                        <tbody>
                                        <tr th:each="file,iState : ${files}" class="tableRow"
                                            th:title="${files[iState.index].officeFile.getTitle() + versions[iState.index]}">
                                            <td class="contentCells">
                                                <a class="stored-edit" th:classappend="${docTypes[iState.index]}"
                                                   th:href="@{/editor(fileId=${files[iState.index].officeFile.getId()})}" target="_blank">
                                                <span th:text="${files[iState.index].officeFile.getTitle()}"></span>
                                                </a>
                                            </td>
                                            <th:block th:if="${filesEditable[iState.index]}">
                                                <td class="contentCells contentCells-icon">
                                                    <a
                                                       th:href="@{/editor(fileId=${files[iState.index].officeFile.getId()},type='desktop',action='edit')}" target="_blank">
                                                    <img src="css/img/desktop.svg" alt="全屏方式打开编辑器" title="全屏方式打开编辑器"/>
                                                    </a>
                                                </td>
                                                <td class="contentCells contentCells-icon">
                                                    <a
                                                       th:href="@{/editor(fileId=${files[iState.index].officeFile.getId()},type='mobile',action='edit')}" target="_blank">
                                                    <img src="css/img/mobile.svg" alt="在移动设备上打开编辑器" title="在移动设备上打开编辑器"/>
                                                    </a>
                                                </td>

                                                <div th:if="${file.getDocType()} != 'pdf'">
                                                    <td class="contentCells contentCells-icon">
                                                        <a
                                                        th:href="@{/editor(fileId=${files[iState.index].officeFile.getId()},type='desktop',action='comment')}" target="_blank">
                                                            <img src="css/img/comment.svg" alt="打开编辑器进行评论" title="打开编辑器进行评论"/>
                                                        </a>
                                                    </td>
                                                </div>
                                                    <div th:if="${file.getDocType()} == 'word'">
                                                        <td class="contentCells contentCells-icon">
                                                            <a
                                                               th:href="@{/editor(fileId=${file.officeFile.getId()},type='desktop',action='review')}" target="_blank">
                                                            <img src="css/img/review.svg" alt="在编辑器中打开进行审核" title="在编辑器中打开进行审核"/>
                                                            </a>
                                                        </td>
                                                    </div>
                                                    <div th:if="${file.getDocType()} == 'cell'">
                                                        <td class="contentCells contentCells-icon">
                                                            <a
                                                               th:href="@{/editor(fileId=${file.officeFile.getId()},type='desktop',action='filter')}" target="_blank">
                                                            <img src="css/img/filter.svg" alt="在编辑器中打开，无法更改筛选器" title="在编辑器中打开，无法更改筛选器" />
                                                            </a>
                                                        </td>
                                                    </div>
                                                    <div th:if="${file.getDocType()} == 'word'">
                                                        <td class="contentCells contentCells-icon">
                                                            <a
                                                               th:href="@{/editor(fileId=${file.officeFile.getId()},type='desktop',action='blockcontent')}" target="_blank">
                                                            <img src="css/img/block-content.svg" alt="在编辑器中打开，无需修改内容控件" title="在编辑器中打开，无需修改内容控件"/>
                                                            </a>
                                                        </td>
                                                    </div>
                                                    <div th:if="${file.getDocType()}  != 'word'">
                                                        <td class="contentCells contentCells-icon"></td>
                                                    </div>
                                                    <div th:if="${file.getDocType()} == 'slide'">
                                                        <td class="contentCells contentCells-icon "></td>
                                                    </div>
                                                    <div th:if="${isFillFormDoc[iState.index]}">
                                                        <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
                                                            <a
                                                               th:href="@{/editor(fileId=${files[iState.index].officeFile.getId()},type='desktop',action='fillForms')}" target="_blank">
                                                                <img src="css/img/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
                                                            </a>
                                                        </td>
                                                    </div>
                                                    <div th:if="${not isFillFormDoc[iState.index]}">
                                                        <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
                                                    </div>
                                            </th:block>
                                            <th:block th:if="${isFillFormDoc[iState.index] and not filesEditable[iState.index]}">
                                                <td class="contentCells contentCells-icon "></td>
                                                <td class="contentCells contentCells-icon">
                                                    <a
                                                       th:href="@{/editor(fileId=${files[iState.index].officeFile.getId()},type='mobile',action='fillForms')}" target="_blank">
                                                        <img src="css/img/mobile-fill-forms.svg" alt="Open in editor for filling in forms for mobile devices" title="Open in editor for filling in forms for mobile devices" />
                                                    </a>
                                                </td>
                                                <td class="contentCells contentCells-icon "></td>
                                                <td class="contentCells contentCells-icon "></td>
                                                <td class="contentCells contentCells-icon "></td>
                                                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
                                                    <a
                                                       th:href="@{/editor(fileId=${files[iState.index].officeFile.getId()},type='desktop',action='fillForms')}" target="_blank">
                                                        <img src="css/img/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
                                                    </a>
                                                </td>
                                            </th:block>
                                            <th:block th:if="${not filesEditable[iState.index]}">
                                                <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                            </th:block>
                                            <td class="contentCells contentCells-icon firstContentCellViewers">
                                                <a
                                                   th:href="@{/editor(fileId=${file.officeFile.getId()},type='desktop',action='view')}" target="_blank">
                                                <img src="css/img/desktop.svg" alt="在查看器中打开全屏" title="在查看器中打开全屏"/>
                                                </a>
                                            </td>
                                            <td class="contentCells contentCells-icon">
                                                <a
                                                   th:href="@{/editor(fileId=${file.officeFile.getId()},type='mobile',action='view')}" target="_blank">
                                                <img src="css/img/mobile.svg" alt="在移动设备的查看器中打开" title="在移动设备的查看器中打开"/>
                                                </a>
                                            </td>
                                            <td class="contentCells contentCells-icon contentCells-shift">
                                                <a
                                                   th:href="@{/editor(fileId=${file.officeFile.getId()},type='embedded',action='embedded')}" target="_blank">
                                                <img src="css/img/embeded.svg" alt="以嵌入式模式打开" title="以嵌入式模式打开"/>
                                                </a>
                                            </td>
                                            <td class="contentCells contentCells-icon">
                                                <a class="convert-file" th:data="${file.officeFile.getId()}"
                                                   th:data-name="${file.officeFile.getTitle()}"
                                                   th:data-type="${file.getDocType()}">
                                                    <img class="icon-action" src="css/img/convert.svg" alt="转码" title="转码" /></a>
                                            </td>
                                            <td class="contentCells contentCells-icon downloadContentCellShift">
                                                <a th:href="@{/download(fileId=${file.officeFile.getId()})}" target="_blank">
                                                <img class="icon-download" src="css/img/download.svg" alt="下载" title="下载" />
                                                </a>
                                            </td>
                                            <td class="contentCells contentCells-icon contentCells-shift">
                                                <a class="delete-file" th:attr="data-fileId=${file.officeFile.getId()}">
                                                    <img class="icon-action" src="css/img/delete.svg" alt="删除" title="删除" />
                                                </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </th:block>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div id="mainProgress">
        <div id="uploadSteps">
            <span id="uploadFileName" class="uploadFileName"></span>
            <div class="describeUpload">完成这些步骤后，您就可以使用文档了。</div>
            <span id="step1" class="step">1.加载文件。</span>
            <span class="step-descr">加载速度取决于文件大小及其包含的其他元素。</span>
            <div id="select-file-type" class="invisible">
                <br />
                <span class="step">请选择当前文档类型</span>
                <div class="buttonsMobile indent">
                    <div class="button file-type document" data="docx">docx</div>
                    <div class="button file-type spreadsheet" data="xlsx">xlsx</div>
                    <div class="button file-type presentation" data="pptx">pptx</div>
                </div>
            </div>
            <br />
            <span id="step2" class="step">2.转换。</span>
            <span class="step-descr">转换为OOXML，以便您可以对其进行编辑。</span>
            <br />
            <div id="blockPassword">
                <span class="descrFilePass">该文件受密码保护</span>
                <br />
                <div>
                    <input id="filePass" type="password"/>
                    <div id="enterPass" class="button orange">确定</div>
                    <div id="skipPass" class="button gray">跳过</div>
                </div>
                <span class="errorPass"></span>
                <br />
            </div>
            <span id="step3" class="step">3. 正在加载编辑器脚本</span>
            <span class="step-descr">它们只加载一次，将缓存在您的计算机上。</span>
           <!-- <input type="hidden" name="hiddenFileName" id="hiddenFileName" />-->
            <input type="hidden" name="hiddenFileId" id="hiddenFileId" />
            <br />
            <span class="progress-descr">请注意，所有操作的速度取决于您的连接质量和服务器位置。</span>
            <br />
            <div class="error-message">
                <b>上传错误: </b><span></span>
                <br />
                请选择另一个文件，然后重试。
            </div>
        </div>
        <iframe id="embeddedView" src="" height="345px" width="432px" frameborder="0" scrolling="no" allowtransparency></iframe>
        <br />
        <div class="buttonsMobile">
            <div id="beginEdit" class="button orange disable">编辑</div>
            <div id="beginView" class="button gray disable">查看</div>
            <div id="beginEmbedded" class="button gray disable">嵌入查看</div>
            <div id="cancelEdit" class="button gray">取消</div>
        </div>
    </div>

    <div id="convertingProgress">
        <div id="convertingSteps">
            <span id="convertFileName" class="convertFileName"></span>
            <span id="convertStep1" class="step">1.选择要转换的格式文件</span>
            <span class="step-descr">转换速度取决于文件大小及其包含的其他元素。</span>
            <table cellspacing="0" cellpadding="0" width="100%" class="convertTable">
                <tbody>
                    <tr class="typeButtonsRow" id="convTypes"></tr>
                </tbody>
            </table>
            <br />
            <span id="convertStep2" class="step">2.文件转换</span>
            <span class="step-descr disable" id="convert-descr">文件被转换 <div class="convertPercent" id="convertPercent">0 %</div></span>
            <span class="step-error hidden" id="convert-error"></span>
            <div class="describeUpload">请注意，所有操作的速度取决于您的连接质量和服务器位置。</div>
            <input type="hidden" name="hiddenFileName" id="hiddenFileName" />
        </div>
        <br />
        <div class="buttonsMobile">
            <div id="downloadConverted" class="button converting orange disable">下载</div>
            <div id="beginViewConverted" class="button converting wide gray disable">查看</div>
            <div id="beginEditConverted" class="button converting wide gray disable">编辑</div>
            <div id="cancelEdit" class="button converting gray">取消</div>
        </div>
    </div>

    <span id="loadScripts" th:attr="data-docs=${datadocs}"></span>
   <!--/*
    <footer>
        <div class="center">
            <table>
                <tbody>
                <tr>
                    <td>
                        <a href="http://api.onlyoffice.com/editors/howitworks" target="_blank">API Documentation</a>
                    </td>
                    <td>
                        <a href="mailto:sales@onlyoffice.com">Submit your request</a>
                    </td>
                    <td class="copy">
                        &copy; Ascensio Systems SIA 2025. All rights reserved. api 改动yujikuan
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </footer> */-->

    <script type="text/javascript" src="scripts/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-migrate-3.4.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/jquery.blockUI.js"></script>
    <script type="text/javascript" src="scripts/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="scripts/jquery.fileupload.js"></script>
    <script type="text/javascript" src="scripts/jquery.dropdownToggle.js"></script>
    <script type="text/javascript" src="scripts/formats.js"></script>
    <script type="text/javascript" src="scripts/jscript.js"></script>
    <script type="text/javascript" src="scripts/converter.js"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var lang = document.cookie
                    .split('; ')
                    .find((row) => row.startsWith('ulang='))
                    ?.split('=')[1];

            var languages = Array.from(document.getElementById("language").options).map(e => e.value)

            if (!languages.includes(lang)) {
                lang = "en";
            }

            document.getElementById("language").value=lang;
        });
    </script>
</body>
</html>